<template>
  <el-aside class="aside-container" :style="menuWidth">
    <el-menu
      class="el-menu-vertical-demo"
      :background-color="theme.bgColor"
      :text-color="theme.fontColor"
      :active-text-color="theme.color"
      :collapse="isCollapse"
      :style="menuWidth"
      :default-active="currentPath"
      router
    >
      <div v-for="(menu, index) in menuList" :key="index">
        <el-submenu :index="String(index)" v-if="menu.subMenu.length">
          <template slot="title">
            <i :class="['iconfont', menu.icon]" :style="iconMarRight"></i>
            <span v-show="!isCollapse">{{ menu.text }}</span>
          </template>
          <el-menu-item
            :index="m.path"
            v-for="(m, i) in menu.subMenu"
            :key="i"
            @click="ADD_LABEL_PAGE(m)"
          >
            <span :class="['iconfont', m.icon]" :style="iconMarRight"></span>
            {{ m.text }}
          </el-menu-item>
        </el-submenu>
        <el-menu-item :index="menu.path" v-else @click="ADD_LABEL_PAGE(menu)">
          <i :class="['iconfont', menu.icon]" :style="iconMarRight"></i>
          <span slot="title">{{ menu.text }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </el-aside>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'my-aside',
  props: {
    menuList: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  data() {
    return {
      isCollapse: false, // 控制侧边菜单是否折叠
    }
  },
  computed: {
    ...mapState('theme', ['theme']),
    // 菜单的宽度
    menuWidth() {
      return { width: this.isCollapse ? '64px' : '240px' }
    },
    // 字体的右边距
    iconMarRight() {
      return { marginRight: this.isCollapse ? '24px' : '10px' }
    },
    // 当前的路由
    currentPath() {
      return this.$route.path
    },
  },
  methods: {
    ...mapMutations('labelPage', ['ADD_LABEL_PAGE']),
  },

  mounted() {
    // 监听侧边菜单是否折叠事件
    this.$bus.$on('changeCollapse', type => {
      this.isCollapse = type
    })
  },
  beforeDestroy() {
    // 销毁之前对事件解绑
    this.$bus.$off(['changeCollapse'])
  },
}
</script>

<style lang="scss" scoped>
.aside-container {
  width: 240px;
  .el-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100%;
    .iconfont {
      margin-right: 24px;
    }
    i.iconfont {
      font-size: 20px;
    }
    .icon-keshihua {
      font-weight: 800;
    }
  }
}
</style>
